<template>
  <div class="ads-space-list">
    <el-card>
      <div slot="header">
        <el-button @click="$router.push({ name: 'add-space' })"
          >添加广告位</el-button
        >
      </div>
      <div>
        <el-table :data="spaceData" style="width: 100%">
          <el-table-column prop="spaceKey" label="spaceKey"> </el-table-column>
          <el-table-column prop="name" label="广告位名称"> </el-table-column>
          <el-table-column prop="createTime" label="创建时间">
          </el-table-column>
          <el-table-column prop="ad" label="操作">
            <template slot-scope="scope">
              <el-button
                @click="
                  $router.push({
                    name: 'edit-space',
                    params: { id: scope.row.id }
                  })
                "
                type="text"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getAllSpaces } from '@/service/ads-space'
export default {
  name: 'AdsSpaceList',
  data () {
    return {
      spaceData: []
    }
  },
  created () {
    this.loadAdsSpaceList()
  },
  methods: {
    //   加载所有广告位
    async loadAdsSpaceList () {
      const { data } = await getAllSpaces()
      if (data.state === 1) {
        this.spaceData = data.content
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-card__header {
  text-align: left;
}
</style>
